<template>
<el-dialog 
title="个人信息编辑"
v-model="dialogVisible"
width="20%"
:before-close="handleClose"
>
    <div class="box">
        <div class="image">
            <img :src="userInfo.avatar" alt="" class="avatar">
        </div>
        <div class="info">
            <el-card class="user-info-card">
                <el-form :model="userInfo" label-width="80px" class="user-form">
                    <el-form-item label="用户名">
                        <el-input 
                            v-model="userInfo.name" 
                            placeholder="请输入用户名"
                        />
                    </el-form-item>
                    
                    <el-form-item label="手机号">
                        <el-input 
                            v-model="userInfo.phone" 
                            placeholder="请输入手机号"
                        />
                    </el-form-item>
                    
                    <el-form-item label="邮箱">
                        <el-input 
                            v-model="userInfo.email" 
                            placeholder="请输入邮箱"
                        />
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitUserInfo">
                            确定
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</el-dialog>
</template>
<script setup lang="ts"> 
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

//控制弹窗
const dialogVisible = ref(false)

// 用户信息接口
interface UserInfoType {
    id: number,
    name: string,
    email: string,
    phone: string,
    avatar: string,
}

// 用户信息
const userInfo = reactive<UserInfoType>({
    id: 0,
    name: '',
    email: '',
    phone: '',
    avatar: '',
})

//打开弹窗
const open = (userData: UserInfoType) => {
    dialogVisible.value = true
    // 正确赋值用户信息
    Object.assign(userInfo, userData)
}

//关闭弹窗
const handleClose = (done: () => void) => {
    done()
}

// 提交用户信息
const submitUserInfo = () => {
    // 这里您可以添加发送给后端的逻辑
    console.log('提交的用户信息:', userInfo)
    
    // 示例：简单验证
    if (!userInfo.name.trim()) {
        ElMessage.warning('用户名不能为空')
        return
    }
    if (!userInfo.phone.trim()) {
        ElMessage.warning('手机号不能为空')
        return
    }
    if (!userInfo.email.trim()) {
        ElMessage.warning('邮箱不能为空')
        return
    }
    
    // TODO: 在这里添加您的后端请求逻辑
    // 例如: await updateUserInfo(userInfo)
    
    ElMessage.success('信息提交成功')
    dialogVisible.value = false
}

//暴露方法给父组件
defineExpose({
    open
})
</script>
<style scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}

.image {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e4e7ed;
}

.info {
    width: 100%;
    max-width: 400px;
}

.user-info-card {
    width: 100%;
}

.user-form {
    padding: 20px 0;
}

.el-form-item {
    margin-bottom: 20px;
}
</style>